<template>
	<view class="product-main">
		<view class="tab head-bar">
			<view class="per" v-for="(item,index) in headItems" :class="{'active':index==current}" @tap="headChange(index,item)" :key="index">
				{{item.name}} 
				<view class="icons"  v-if="index == 1 || index == 2">
					<uni-icons  :color="item.isDesc === 1 ? '#DD524D' : '#fff'" class="icon-child" type="arrowup" size="12"></uni-icons>
					<uni-icons  :color="item.isDesc === 0 ? '#DD524D' : '#fff'" class="icon-child" type="arrowdown" size="12"></uni-icons>
				</view>
			</view>
		</view>

		<view class="product-list">
			
			<navigator class="product-block" :url="'./info/info?productId='+item.id" :key="item.id" v-for="(item,index) in productList">
				<image class="img" :src="item.pic" mode="scaleToFill"></image>
				<view class="text-area">
					<view class="gname">
						{{item.name}}
					</view>
					<view class="price-origin">
						<text class="price">¥{{moneyRound(item.price) }}</text>
						<text class="origin">{{item.origin_city||'不凡'}}</text>
					</view>
				</view>
			</navigator>
			
		</view>
		<uniLoadMore :status="more"></uniLoadMore>
	</view>
</template>

<script setup>
	import {onLoad,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import {computed, ref} from 'vue'
	import {findProductList} from '@/api/kind/index.js'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue" 
	import {moneyRound} from "@/utils/index.js"
	const start = ref(1)
	const limit = ref(2)
	const more = ref('more')  //@value more loading前  	@value loading loading中  	@value noMore 没有更多了
	const productList = ref([])
	const kindId = ref('')
	const current = ref('0')
	const headItems = ref([{
						name: '新品',
						value: '',
						isDesc:""
					},
					{
						name: '销量',
						value: 'sale',
						isDesc:""
					},
					{
						name: '价格',
						value: 'price',
						isDesc:""
					},
					{
						name: '筛选',
						value: '',
						isDesc:""
					}
				])
	const page = ref({
					start: 1,
					limit: 6,
					lastPage: false
				})
    const total = ref(0)
	onLoad((option)=>{
		kindId.value = option.kindId;
		getProductList();
	})
	// 监听下拉事件s
	onPullDownRefresh(()=>{
		clear()
		getProductList();
	})
	onReachBottom(()=>{
		if(total.value > productList.value.length){
			more.value="more";
			getProductList();
			return 
		}
		more.value="noMore";
	})
	const sortBy = computed(()=>{
		if(current.value == 0){
			return ""
		}else if( current.value == 1){
			return "sale"
		}else if(current.value == 2){
			return "price"
		}else{
			return ""
		}
	})
	const clear = (val) =>{
		productList.value = [];
		headItems.value.forEach((ele,index)=>{
			if(index == val){
				
			}else{
				ele.isDesc = null
			}
		})
		page.value =  {
			start: 1,
			limit: 6,
			lastPage: false
		}
	}
	const getProductList = async() => {
		uni.showLoading({
			title: '加载中'
		});
		more.value="loading";
		//获取列表
		var res = await findProductList(page.value.start,page.value.limit,{
			categoryId:kindId.value,
			sortBy:headItems.value[current.value].value,
			isDesc:headItems.value[current.value].isDesc
		})	
		// 	uni.hideLoading()
		// 	uni.stopPullDownRefresh();
		// 	return 
		// }else{
			productList.value.push(...res.data.rows);
			page.value.start ++;
			total.value = res.data.total;
		//}
		if(res.data.total <= productList.value.length){ // 如果是最后一页数据
			more.value="noMore";
		}else{
			more.value="more";
		}
		uni.hideLoading()
		uni.stopPullDownRefresh(); 
	}
	const headChange = (index,val) => {
		current.value = index;
		clear(index);
		if(val.isDesc == ""){
			val.isDesc = 1
		}else if(val.isDesc == 1){
			val.isDesc = 0
		}else{
			val.isDesc = 1
		}
		getProductList();
	}
</script>

<style scoped lang="scss">
	.product-main {
		.head-bar {
			position: fixed;
			left: 0;
			top: 0;
			/* #ifdef H5 */
				top: 84rpx;
			/* #endif */
			
			display: flex;
			justify-content: space-around;
			width: 100%;
			height: 62rpx;
			padding-top: 14rpx;
			background-color: #354E44;
			color: #fff;
			font-size: 30rpx;
			line-height: 62rpx;
			z-index: 999;

			.label {
				radio {
					display: none;
				}

				

			}
			.per{
				display: flex;
				align-items: center;
				border-bottom: 2px solid transparent;
				.icons{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-left: 6rpx;
					color: #fff;
					.icon-child{
						display: flex;
						align-items: center;
						height: 16rpx;
						overflow: hidden;
						:deep(span) {
							height: 100%;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: center;
						} 
					}
				}
			}
			.active {
				// border-bottom: 2px solid #DD524D;
				color: #DD524D;
			}
		}

		.product-list {
			width: 100%;
			margin-top: 120rpx;
			overflow: hidden;
			.product-block {
				float: left;
				width: 316rpx;
				margin-left: 40rpx;
				margin-bottom: 40rpx;
				background-color: #fff;
				border-radius: 4px;

				.img {
					width: 100%;
					height: 238rpx;
				}

				.text-area {
					padding: 36rpx;
					font-size: 26rpx;

					.gname {
						color: #3E3E3E;
						line-height: 38rpx;
						margin-top: 8rpx;
						font-weight: bold;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.price-origin {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;

						.origin {
							color: #3E3E3E;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}

			}
		}

	}
</style>
